<template>
  <div>
    <h2>歌单详情</h2>
    <div>
      <!-- 歌单信息 -->

      <h3>评论列表</h3>
      <ul>
        <li v-for="comment in comments" :key="comment.id">{{ comment.content }}</li>
      </ul>

      <div>
        <h4>发表评论</h4>
        <textarea v-model="newComment" rows="4" cols="50"></textarea>
        <button @click="postComment">发表</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      comments: [], // 存储评论列表
      newComment: '', // 存储新评论内容
      // 其他数据...
    };
  },
  methods: {
    loadComments() {
      // 发起请求获取评论列表
      axios.get(`/api/comments/playlist/${this.playlistId}`)
        .then((response) => {
          this.comments = response.data;
        })
        .catch((error) => {
          console.error('获取评论列表失败: ', error);
        });
    },
    postComment() {
      // 发表评论
      if (this.newComment.trim() === '') {
        return; // 不允许发表空评论
      }

      axios.post('/api/comments/add', { userId: this.userId, playlistId: this.playlistId, content: this.newComment })
        .then((response) => {
          if (response.status === 200) {
            // 评论发表成功，刷新评论列表
            this.loadComments();
            this.newComment = ''; // 清空评论输入框
          } else {
            // 评论发表失败
            alert('评论发表失败');
          }
        })
        .catch((error) => {
          console.error('评论发表失败: ', error);
          alert('评论发表失败');
        });
    },
    // 其他方法...
  },
  created() {
    // 在页面创建时加载评论列表
    this.loadComments();
  },
};
</script>
